<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="300" />
    <el-table-column prop="name" label="用户名"/>
    <el-table-column prop="phone" label="联系方式"/>
    <el-table-column prop="permissions" label="权限">
      <template #default="scope">
        <el-select v-model="scope.row.permissions" placeholder="身份" size="large" @change="handleChange(scope.row)">
          <el-option
            v-for="item in userlist"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button  @click="$router.push(`/edituser/${scope.row.id}`)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {reqGetAllUsers ,reqChangeUserPermissionsByUserId} from '../../../api/index';
export default {
    name:'UserList',
    data(){
      return {
        tableData:[],
        userlist:['普通用户','VIP用户']
      }
    },
    methods:{
      async getUsers(){
        let res = await reqGetAllUsers();
        console.log("res ",res);
        this.tableData = [];
        this.tableData.push(...res);
      },
      async handleChange(row){
        console.log("permissions ",row.permissions);
        let res = await reqChangeUserPermissionsByUserId(row.id,row.permissions);
        this.tableData = [];
        this.tableData.push(...res);
      }
    },
    mounted(){
      this.getUsers();
    }
}
</script>

<style>

</style>